<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="/static/js/inout/jquery-1.8.2.min.js"></script>
		<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
                <style>
                    * {
                                margin: 0;
                                padding: 0;
                        }

                        ul {
                                list-style: none;
                        }

                        a {
                                text-decoration: none;
                        }

                        span,
                        a,
                        samp {
                                display: inline-block;
                        }

                        input {
                                outline: none;
                                text-indent: 10px;
                        }

                        .l {
                                float: left;
                        }

                        .r {
                                float: right;
                        }
                        .title{
                                width: 100%;
                                padding: 0 15px;
                                border-bottom: 2px solid gainsboro;
                                height: 55px;
                                position: absolute;
                                z-index: 9999;
                        }
                        .title a{
                                height: 40px;
                                line-height: 40px;
                                text-indent: 10px;
                                font-size: 14px;
                                padding:  0 10px;
                                margin: 7.5px 5px;
                                font-weight: 600;
                                border-radius: 5px;
                                cursor: pointer;
                        }
                        .title a:hover{
                                background: #f2f2f2;
                        }
                        .addtitle{
                                background: #f2f2f2;
                        }
                        .box {
                                width: 100%;
                                min-width: 1200px;
                                overflow: hidden;
                                height: 100%;
                                position: relative;
                        }

                        .left {
                                width: 300px;
                                background: #fafafa;
                                height: 100%;
                                overflow-x: hidden;
                        }
                        .left,.right{
                                position: absolute;
                                top: 55px;
                                overflow-y: auto;
                        }
                        .tab {
                                width: 98%;
                                margin-left: 2%;
                        }

                        .tab li {
                                width: 15%;
                                float: left;
                                text-align: center;
                                padding: 5px 0;
                                margin-right: 5%;
                        }
                        .addTab{
                                border-bottom: 2px solid #d6d4d4;
                        }

                        .tab li a {
                                font-size: 14px;
                                color: #999;
                        }

                        .itme {
                                display: none;
                                width: 100%;
                                float: left;
                        }


                        .VerticalMenu {
                                height: 100%;
                                width: 100%;
                                cursor: pointer;
                        }

                        .VerticalMenu>div {
                                width: 100%;
                                float: left;
                        }

                        .VerticalMenu>div>div:first-child {
                                text-align: left;
                                font-size: 14px;
                                height: 40px;
                                line-height: 40px;
                                padding-right: 10px;
                                padding-left: 20px;
                                transition: background-color 0.4s linear;
                        }
                        .VerticalMenu>div>div:first-child span{
                                width: 90%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                        }

                        .VerticalMenu>div>div:first-child:hover {
                                background-color: #e5e5e5;
                        }

                        .VerticalMenu>div>div:first-child>i:last-child {
                                line-height: 40px;
                                float: right;
                                transform: rotate(0deg);
                                transition: transform 0.4s linear;
                        }

                        .VerticalMenu>div>div:last-child {
                                width: 100%;
                                display: none;
                        }

                        .VerticalMenu>div>div:last-child>div {
                                transition: background-color 0.1s linear;
                                text-align: left;
                                height: 40px;
                                line-height: 40px;
                                font-size: 12px;
                                width: 100%;
                                overflow: hidden;
                        }
                        .VerticalMenu>div>div:last-child>div span{
                                width:70%;
                                padding: 0 15%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                        }

                        .VerticalMenu>div>div:last-child>div:hover {
                                background-color: #f2f2f2!important;
                        }

                        .VerticalMenu>div:last-child::after {
                                display: block;
                                clear: both;
                        }


                        /*搜索*/
                        .inp{
                                height: 34px;
                                width: 60%;
                                margin: 10px 0px 10px 20px;
                                border: 1px solid gainsboro;
                                background: #fff;
                                border-radius: 5px;
                        }
                        .inp input{
                                height: 30px;
                                width: 75%;
                                border: none;
                                background: none;margin-top: 2px;
                        }
                        .inp a{
                                float: right;
                                width:32px;
                                margin-top: 1px;
                        }
                        .inp img{
                                width: 32px;
                        }
                        /*收藏*/
                        .Collection p{
                                margin: 10px 0px 10px 20px;
                        }
                        .right {
                                min-width: 900px !important;
                                left: 300px;
                        }
                        .r-cont{
                                width: 100%;
                                float: left;
                        }
                        .top{
                                width: 100%;
                                float: left;
                        }
                        .r-cont h3{
                                text-align: center;
                                font-size: 20px;
                                padding: 0 10px;
                                font-weight: 500;
                                margin: 18px 0;
                        }
                        .r-cont p{
                                padding: 0 10px;
                                font-size: 14px;
                                line-height: 24px;
                                height: auto;
                        }
                        .r-cont p img{
                            width: 100%;
                        }
                        .sous-cont{
                                width: 100%;
                                float: left;
                                border-top: 1px solid gainsboro;
                        }
                        .sous-cont p{
                                padding: 0 10px 0 20px;
                                height: 40px;
                                line-height: 40px;
                                font-size: 14px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                        }
                        /*.links{
                                width: 100%;
                                float: left;
                        }
                        .links p{
                                text-indent: 0;
                                width: 50%;
                                float: left;
                        }
                        .links p:last-of-type{
                                float: right;
                                text-align: right;
                        }*/
                        .searchlist{
                            cursor: pointer;
                        }
                        .searchlist:hover {
                                background-color: #f2f2f2!important;
                        }
                </style>
	</head>

	<body>
		<div class="box">
			<div class="title">
                            {volist name="group" id='dt'}
                                <a href='{:url("index1")}?id={$dt.id}' {eq name='dt.id' value='$id'}class="addtitle"{/eq}>{$dt.title}</a>
                            {/volist}
                            
			</div>
			<div class="left l">
				<ul class="tab l">
					<li>
						<a href="#">目录</a>
					</li>
					<li>
						<a href="#">搜索</a>
					</li>
				</ul>
				<!--目录-->
				<div class="itme">
					<div class="VerticalMenu">
                                            {volist name='data' id='dt'}
						<div>
							<div><span>{$dt.title}</span><i class="fa fa-angle-right fa-lg"></i></div>
							<div name="xz">
                                                            {volist name='dt.manual' id='dts'}
								<div>
									<div><span target='{:url("Adminmanual/getDataDetails")}?id={$dts.id}'>{$dts.title}</span></div>
								</div>
                                                            {/volist}
							</div>
						</div>
                                            {/volist}
					</div>
				</div>
				<!--评论-->
				<div class="itme">
					<div class="inp">
						<input id='sertext' type="text" placeholder="请输入搜索关键字" />
                                                <a href="javascript:;" id='search'><img src="/static/images/ser.png" /></a>
					</div>
					<div class="sous-cont" id='searchList'>
					</div>
				</div>
			</div>
			<div class="right r">
				
			</div>
		</div>
	</body>
        <script>
            $(function() {
                    $('#search').click(function(){
                            var text = $('#sertext').val();
                            if(text == ''){
                                alert('请输入关键字');return false;
                            }
                            var pid = {$id};
                            $.ajax({
                                    url: '{:url("Adminmanual/searchData")}',
                                    data:  {keyword:text,pid:pid},
                                    dataType:"json",
                                    type: "GET",
                                    success:function( res ){
                                        var htmls = '';
                                        $.each(res,function(index,contents){
                                            var url = '{:url("Adminmanual/getDataDetails")}?id='+contents.id;
                                            htmls+="<p url='"+url+"' class='searchlist'>"+contents.title+"</p>"
                                        })
                                        if(htmls == ''){
                                            htmls+='<p>没找到数据!!</p>';
                                        }
                                        $('#searchList').html(htmls);
                                    },
                                    fail:function(){
                                        return;
                                    }
                            });
                    });
                    
                    
                    //侧边栏tab
                    $(".itme:first").show();
                    $(".tab li:first").addClass("addTab");
                    $(".tab li").click(function() {
                            $(this).addClass("addTab").siblings("li").removeClass("addTab");
                            var index = $(this).index();
                            $(".itme").eq(index).show().siblings(".itme").hide();
            //		var wh = $(window).height();
            //		console.log(wh)

                    })

                    $(".VerticalMenu>div>div:first-child").click(function() {
                            $xz = $(".VerticalMenu>div>div:first-child");
                            $($xz).not(this).children("i.fa-angle-right").css({
                                    "transform": "rotate(0deg)",
                                    "color": "#000000"
                            }).attr("leng", "")
                            if($(this).children("i.fa-angle-right").attr("leng") != "s") {
                                    $(this).children("i.fa-angle-right").attr("leng", "s")
                                    $(this).children("i.fa-angle-right").css({
                                            "transform": "rotate(90deg)",
                                            "color": "#f9579e"
                                    })
                            } else {
                                    $(this).children("i.fa-angle-right").attr("leng", "")
                                    $(this).children("i.fa-angle-right").css({
                                            "transform": "rotate(0deg)",
                                            "color": "#000000"
                                    })
                            }
                            $($xz).not($(this)).siblings("[name='xz']").stop().slideUp(400)
                            $(this).siblings("[name='xz']").slideToggle(400)

                    })
                    $VerticalMenu_scdj = null;
                    $(".VerticalMenu>div>div:last-child>div").click(function() {
                            $($VerticalMenu_scdj).css("background-color", "#fafafa");
                            $(this).css("background-color", "#f2f2f2");
                            $VerticalMenu_scdj = $(this)
                    })
                    //侧边栏高度
                    var s = $(window).height() - 75 + "px";
                    $(".left,.right").height(s)
                    $(".VerticalMenu div div div span").click(function() {
                            $(".aaa").hide();
                    });
                    $(".title a").click(function(){
                            $(this).addClass("addtitle").siblings("a").removeClass("addtitle");
                    })
            var wh=$(window).height()-20;
            $(".box").height(wh)

                    rw=$(window).width()-300;
                    $(".right").width(rw);
                    $(window).css("min-width",1200)
                    $(window).resize(function(){
                            rw=$(window).width()-300;
                            $(".right").width(rw);
                    });

                            //页面预加载
                    $.get("right.html", function(data) { //初始將a.html include div#iframe
                            //$(".right").html(data);　　
                    });
                    $('.VerticalMenu>div>div:last-child>div').click(function() {　　 // 找出 li 中的超链接 href(#id)
                            var $this = $(this),
                                    clickTab = $this.find('span').attr('target'); // 找到链接a中的targer的值
                        $(".right").load(clickTab);
                    });
                  
                    $("body").on("click",".searchlist", function() {
                      var $this = $(this),
                                    clickTab = $this.attr('url'); // 找到链接a中的targer的值
                        $(".right").load(clickTab);
                    });
                    
            });


        </script>
</html>